<template>
  <div class="classify-center">
    <div class="classify">
      <div class="styles">
        <div class="label">
          <ul v-for="(ele, index) in navData" :key="index" class="title">
            <li
              class="label-title"
              v-for="item in ele.selectList"
              :key="item.value"
              @click="navSelected(ele.category, item.value)"
              :class="{ active: item.value == $data[ele.category] }"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>

    <div class="content">
      <div
        class="manga-item"
        v-for="comic in ComicData"
        :key="comic?.season_id"
        @click="goToMangaDetail(comic)"
      >
        <img :src="comic?.vertical_cover" alt="" />
        <div class="manga-title">{{ comic?.title }}</div>
        <div class="manga-info">
          {{
            comic?.is_finish === 1
              ? "[完结] 共" + comic?.last_short_title + "话"
              : "更新至" + comic?.last_short_title + "话"
          }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ComicData: [],
      styleId: -1,
      areaId: -1,
      isFinish: -1,
      isFree: -1,
      order: 0,
      navData: [
        {
          category: "styleId",
          selectList: [
            {
              name: "全部",
              value: -1,
            },
            {
              name: "热血",
              value: 999,
            },
            {
              name: "古风",
              value: 997,
            },
            {
              name: "玄幻",
              value: 1016,
            },
            {
              name: "奇幻",
              value: 998,
            },
            {
              name: "悬疑",
              value: 1023,
            },
            {
              name: "都市",
              value: 1002,
            },
            {
              name: "历史",
              value: 1096,
            },
            {
              name: "武侠仙侠",
              value: 1092,
            },
            {
              name: "游戏竞技",
              value: 1088,
            },
            {
              name: "悬疑灵异",
              value: 1081,
            },
            {
              name: "架空",
              value: 1063,
            },
            {
              name: "青春",
              value: 1060,
            },
            {
              name: "西幻",
              value: 1054,
            },
            {
              name: "现代",
              value: 1048,
            },
            {
              name: "正能量",
              value: 1028,
            },
            {
              name: "科幻",
              value: 1015,
            },
          ],
        },
        {
          category: "areaId",
          selectList: [
            {
              name: "全部",
              value: -1,
            },
            {
              name: "大陆",
              value: 1,
            },
            {
              name: "日本",
              value: 2,
            },
            {
              name: "韩国",
              value: 6,
            },
            {
              name: "其他",
              value: 5,
            },
          ],
        },
        {
          category: "isFinish",
          selectList: [
            {
              name: "全部",
              value: -1,
            },
            {
              name: "连载",
              value: 0,
            },
            {
              name: "完结",
              value: 1,
            },
          ],
        },
        {
          category: "isFree",
          selectList: [
            {
              name: "全部",
              value: -1,
            },
            {
              name: "免费",
              value: 1,
            },
            {
              name: "付费",
              value: 2,
            },
            {
              name: "等就免费",
              value: 3,
            },
          ],
        },
        {
          category: "order",
          selectList: [
            {
              name: "人气推荐",
              value: 0,
            },
            {
              name: "更新时间",
              value: 1,
            },
            {
              name: "上架时间",
              value: 3,
            },
          ],
        },
      ],
    };
  },
  methods: {
    navSelected(category, value) {
      this[category] = value;
    },
    async getComicData(comicDataUrl = this.comicDataUrl) {
      let { data } = await this.$http(comicDataUrl);
      this.ComicData = data.data;
      console.log(comicDataUrl);
    },
    goToMangaDetail(comic) {
      this.$router.push({ path: "/comic_id=" + comic?.["season_id"] });
    },
  },
  computed: {
    comicDataUrl() {
      return `https://apis.netstart.cn/mbcomic/ClassPage?styleId=${this.styleId}&areaId=${this.areaId}&isFinish=${this.isFinish}&order=${this.order}&pageNum=1&pageSize=39&isFree=${this.isFree}`;
    },
  },
  mounted() {
    this.getComicData();
  },

  watch: {
    comicDataUrl(newValue, oldValue) {
      if (newValue != oldValue) {
        this.getComicData(newValue);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.classify-center {
  width: 375px;
  margin: 0 auto;
}
.classify {
  width: 343px;
  color: #6c727e;
  padding: 10px 16px 0;
  font-size: 12px;
  .styles {
    width: 343px;
    // height: 97px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    .title {
      display: flex;
      flex-wrap: wrap;
      .label-title {
        height: 16px;
        padding: 2px 10px;
        margin: 6px 0;
      }
      .active {
        color: #fb7299;
      }
    }
  }
  .label {
    position: relative;
    .hidden {
      width: 40px;
      line-height: 32px;
      position: absolute;
      right: 5px;
      bottom: 0;
    }
  }
}
.content {
  width: 359px;
  padding: 0 8px 16px;
  display: flex;
  flex-wrap: wrap;
  .manga-item {
    width: 103px;
    height: 181px;
    padding: 8px;
    img {
      width: 100%;
      display: block;
    }
    .manga-title {
      width: 100%;
      height: 19px;
      margin-top: 8px;
      font-size: 14px;
      color: #222222;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .manga-info {
      font-size: 12px;
      color: #999;
      width: 100%;
      height: 16px;
    }
  }
}
</style>